import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {

    state = {mouseEnter:false}

    handleUpdate = (id)=>{
        return (event)=>{
            this.props.updateTodo(id,event.target.checked);
        }
    }

    // 鼠标移出移入响应事件
    handleMouse = (flag)=>{
        return ()=>{
            this.setState({mouseEnter:flag})
        }
    }

    // 处理删除事件，调用父组件函数
    handleDelete = (id)=>{
        if(window.confirm('确定删除吗？')){
            this.props.deleteTodo(id);
        }
    }

    /* 
        当事件处理需要传递参数时，可以有2种做法，一种是利用函数柯里化，还有一种是写内联函数
    */
    render() {
        const {id,title,finished} = this.props;
        return (
            <li style={{backgroundColor: this.state.mouseEnter? '#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} >
                <label>
                    <input type="checkbox"  checked={finished} onChange={this.handleUpdate(id)}/>
                    <span>{title}</span>
                </label>
                <button onClick={()=>{this.handleDelete(id)}} className="btn btn-danger" style={{ display: this.state.mouseEnter?'block':'none' }}>删除</button>
            </li>
        )
    }
}